<script setup lang='ts'>
import type { FieldValues } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { type RequestIndex, useGetAreaListToQuery, usePolicyIndex } from '@fl/api/fit-old-api'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'

import addOrEditBox from './component/addOrEdit.vue'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'policy-index',
})
const { push } = useRouter()
// const tablePage = ref({
//     currentPage: 1,
//     pageSize: 10,
//     total: 0,
// })
// const initialPage = toRaw({ ...tablePage.value })

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref<FieldValues>(cloneDeep(initialPage))

const initialState = {
    areaCode: '',
    city: '',
    district: '',
    level: '',
    province: '',
}
const state = ref<FieldValues>(cloneDeep(initialState))

// 省市区列表
const { data: provinceOptions } = useGetAreaListToQuery({ code: '', level: '1' })
const { data: cityOptions } = useGetAreaListToQuery({ code: '', level: '2' })
const { data: districtOptions } = useGetAreaListToQuery({ code: '', level: '3' })

const editVisible = ref(false)
const editId = ref('')

// 政策列表
const params = computed(() => ({
    page: tablePage.value.currentPage,
    size: tablePage.value.pageSize,
    ...state.value,
}))
const { data, isLoading } = usePolicyIndex(params)
const records = ref()
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.records)
        tablePage.value.total = data.value.total!
    }
})

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

function submit(values: FieldValues) {
    state.value = { ...values }
    if (values?.district) {
        state.value.areaCode = values.district
        state.value.level = '3'
    }
    else if (values?.city) {
        state.value.areaCode = values.city
        state.value.level = '2'
    }
    else if (values?.province) {
        state.value.areaCode = values.province
        state.value.level = '1'
    }
    tablePage.value.currentPage = 1
    console.log('submit', state.value)
}

function reset() {
    state.value = initialState
    tablePage.value = initialPage
}

// 查看
function goToShow(row: any) {
    push(`/fit-old/policy/${row.id}`)
}

// 编辑
function handleEdit(row: any) {
    editVisible.value = true
    editId.value = row?.id
}

const columns = [
    {
        colProps: {
            span: 8,
        },
        label: '省',
        options: provinceOptions,
        prop: 'province',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '市',
        options: cityOptions,
        prop: 'city',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '区',
        options: districtOptions,
        prop: 'district',
        valueType: 'select',
    },
]

const gridOptions = reactive<VxeGridProps<RequestIndex>>({
    columns: [
        { field: 'province', title: '省' },
        { field: 'city', title: '市' },
        { field: 'district', title: '区' },
        { field: 'sortNo', title: '排序号' },
        { slots: { default: 'operate' }, title: '操作', width: 200 },
    ],
})
</script>

<template>
    <ElCard class="mb-20"
            shadow="never"
    >
        <SearchForm submit-text="搜索"
                    v-bind="state"
                    :columns="columns"
                    @reset="reset"
                    @submit="submit"
        />
    </ElCard>

    <ElCard shadow="never">
        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isLoading"
                     :data="records"
                     @page-change="handlePageChange"
        >
            <!-- <template #toolbar_buttons>
                <ElButton type="primary"
                          @click="goToAdd"
                >
                    <div class="i-ic:baseline-add size-16" />
                    新增
                </ElButton>
            </template> -->

            <template #operate="{ row }">
                <el-button text
                           @click="goToShow(row)"
                >
                    查看
                </el-button>

                <el-button type="primary"
                           text
                           @click="handleEdit(row)"
                >
                    编辑
                </el-button>
            </template>
        </SearchTable>
    </ElCard>

    <addOrEditBox v-model:visible="editVisible"
                  v-model:id="editId"
    />
</template>
